<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title> select 选择框 </title>
	</head>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

	<body>

		<div style="display: flex;">

			<div class="centent" style="margin-right: 10px;">
				<select multiple="multiple" id="select1" style="width: 260px;height: 200px;">
					<option value="1">权限1</option>
					<option value="2">权限2</option>
					<option value="3">权限3</option>
					<option value="4">权限4</option>
					<option value="5">权限5</option>
					<option value="6">权限6</option>
					<option value="7">权限7</option>
				</select>
				<div>
					<button class="add"> 选中添加到右边</button>
					<button class="add_all"> 全部选中添加到右边</button>
				</div>
			</div>

			<div class="centent">
				<select multiple="multiple" id="select2" style="width: 260px;height: 200px;">
					<option value="7">权限7</option>
					<option value="8">权限8</option>
					<option value="9">权限9</option>
				</select>
				<div>
					<button class="remove"> 选中添加到右边</button>
					<button class="remove_all"> 全部选中添加到右边</button>
				</div>
			</div>

		</div>

	</body>
	<script type="text/javascript">
		$('.add').click(function(){
			$('#select1 option:selected').appendTo('#select2')
		})
		$('.add_all').click(function(){
			$('#select1 option').appendTo('#select2')
		})
		
		$('.remove').click(function(){
			$('#select2 option:selected').appendTo('#select1')
		})
		$('.remove_all').click(function(){
			$('#select2 option').appendTo('#select1')
		})
		
		
		$('#select1').dblclick(function(){
			$('option:selected').appendTo('#select2')
		})
		
		$('#select2').dblclick(function(){
			$('option:selected').appendTo('#select1')
		})
	</script>
</html>